<template lang="pug">
van-popup.optionx(v-model="showSheet" position="bottom" :overlay='false' :style="{ height: '100%' }" get-container="body")
  .optionx-drawer.pr.scroll-y
    img.pf.w30.h30.hand(src='static/images/vrtour/close.png' alt='' style='left: 15px; top: 10px;z-index: 3;' @click="showSheet = false")
    .w100p.mgb4.pr
      img.w100p(:src='option.full_image_url || option.full_file_url' alt='')
      .pd1.pa.w100p.box-sizing.fs-l.fc-w3(v-if='!is864' style='z-index: 2;bottom: 0;left: 0;background: rgba(0,0,0,.1);font-size: 22px;') {{option.name}}
    .pdx2
      template(v-if='is864')
        .mgb2.fs-l(v-if='activities && activities.length') {{option.name}}
        .mgb4(v-if='activities && activities.length')
          .list-item.omit(v-for="(activity, index) in activities" :key='activity.point_id' @click="jump(activity)") {{`${index + 1}、${activity.name}`}}
      template(v-else)
        .mgb2.fs-l(v-if='activities && activities.length') 途径景点
        .mgb0(v-if='activities && activities.length')
          el-timeline
            el-timeline-item.hand(
              v-for="(activity, index) in activities"
              :key="index"
              type="danger"
              size="large"
              @click.native="jump(activity)"
            ) {{activity.name}}
      .optionx-drawer-detail.mgb4.box-sizing.pdt4.pdl1.pdr1(v-html="option.contents")
</template>

<script>
import { pauseHanddrawBgmusic } from '@/utils/audio'
export default {
  data() {
    return {
      is864: $globalconfig.MODULES.IS_JIAPEI_PROGRAM_OPEN,
      showSheet: false,
      option: {},
      activities: [],
    }
  },
  methods: {
    openDialog(item) {
      // console.log(item)
      this.option = item.item
      this.activities = item.pointList
      this.showSheet = true
    },
    jump(item) {
      const url = item.preview_url + '?tour=' + this.$route.params.id + '&t=' + Date.now()
      window.location.href = url
      pauseHanddrawBgmusic()
    }
  }
}
</script>

<style lang="stylus" scoped>
.optionx
  >>>.el-timeline-item__content
    color #666
  .optionx-drawer
    width 100%
    height 100%
    .list-item
      background #ddd
      color #333
      box-sizing border-box
      padding 10px 10px
      margin-bottom 10px
      cursor pointer
      font-size 14px
      &:last-child
        margin-bottom 0
    .optionx-drawer-detail
      border-top 1px solid #eee
      white-space pre-wrap
      word-break break-all
      line-height 24px
      >>> img
        max-width 100%
</style>
